<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-pro-card ant-pro-statistic-card ant-pro-card-border"
      style="width: 250px;"
    >
      <div
        class="ant-pro-card-header"
      >
        <div
          class="ant-pro-card-title"
        >
          整体流量评分
        </div>
        <div
          class="ant-pro-card-extra"
        >
          <span
            aria-label="ellipsis"
            class="anticon anticon-ellipsis"
            role="img"
          >
            <svg
              aria-hidden="true"
              data-icon="ellipsis"
              fill="currentColor"
              focusable="false"
              height="1em"
              viewBox="64 64 896 896"
              width="1em"
            >
              <path
                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
              />
            </svg>
          </span>
        </div>
      </div>
      <div
        class="ant-pro-card-body"
      >
        <div
          class="ant-pro-statistic-card-content "
        >
          <div
            class="ant-pro-card-statistic"
          >
            <div
              class="ant-pro-card-statistic-wrapper"
            >
              <div
                class="ant-pro-card-statistic-content"
              >
                <div
                  class="ant-statistic ant-pro-card-statistic-layout-vertical"
                >
                  <div
                    class="ant-statistic-content"
                  >
                    <span
                      class="ant-statistic-content-value"
                    >
                      <span
                        class="ant-statistic-content-value-int"
                      >
                        86
                      </span>
                      <span
                        class="ant-statistic-content-value-decimal"
                      >
                        .2
                      </span>
                    </span>
                    <span
                      class="ant-statistic-content-suffix"
                    >
                      分
                    </span>
                  </div>
                </div>
                <div
                  class="ant-pro-card-statistic-description"
                >
                  <div
                    class="ant-pro-card-statistic"
                  >
                    <div
                      class="ant-pro-card-statistic-wrapper"
                    >
                      <div
                        class="ant-pro-card-statistic-content"
                      >
                        <div
                          class="ant-statistic ant-pro-card-statistic-layout-inline"
                        >
                          <div
                            class="ant-statistic-title"
                          >
                            排名前
                          </div>
                          <div
                            class="ant-statistic-content"
                          >
                            <span
                              class="ant-statistic-content-value"
                            >
                              20%
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="ant-pro-statistic-card-chart"
          >
            <img
              alt="进度条"
              src="https://gw.alipayobjects.com/zos/alicdn/PmKfn4qvD/mubiaowancheng-lan.svg"
              width="100%"
            />
          </div>
        </div>
        <div
          class="ant-pro-statistic-card-footer"
        >
          <div
            class="ant-pro-card-statistic"
          >
            <div
              class="ant-pro-card-statistic-wrapper"
            >
              <div
                class="ant-pro-card-statistic-content"
              >
                <div
                  class="ant-statistic ant-pro-card-statistic-layout-horizontal"
                >
                  <div
                    class="ant-statistic-title"
                  >
                    累计注册数
                  </div>
                  <div
                    class="ant-statistic-content"
                  >
                    <span
                      class="ant-statistic-content-value"
                    >
                      <span
                        class="ant-statistic-content-value-int"
                      >
                        15
                      </span>
                      <span
                        class="ant-statistic-content-value-decimal"
                      >
                        .1
                      </span>
                    </span>
                    <span
                      class="ant-statistic-content-suffix"
                    >
                      万
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="ant-pro-card-statistic"
          >
            <div
              class="ant-pro-card-statistic-wrapper"
            >
              <div
                class="ant-pro-card-statistic-content"
              >
                <div
                  class="ant-statistic ant-pro-card-statistic-layout-horizontal"
                >
                  <div
                    class="ant-statistic-title"
                  >
                    本月注册数
                  </div>
                  <div
                    class="ant-statistic-content"
                  >
                    <span
                      class="ant-statistic-content-value"
                    >
                      <span
                        class="ant-statistic-content-value-int"
                      >
                        15
                      </span>
                      <span
                        class="ant-statistic-content-value-decimal"
                      >
                        .1
                      </span>
                    </span>
                    <span
                      class="ant-statistic-content-suffix"
                    >
                      万
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        StatisticCard Footer Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 卡片标题
        </li>
        <li>
          <strong>
            extra
          </strong>
          : 卡片右上角操作区域
        </li>
        <li>
          <strong>
            statistic
          </strong>
          : 主要统计信息配置
        </li>
        <li>
          <strong>
            chart
          </strong>
          : 图表区域
        </li>
        <li>
          <strong>
            footer
          </strong>
          : 底部区域，可以是 React 节点
        </li>
        <li>
          <strong>
            style
          </strong>
          : 卡片样式对象
        </li>
      </ul>
      <h4>
        Footer 区域特点：
      </h4>
      <ul>
        <li>
          <strong>
            额外信息
          </strong>
          : 在卡片底部展示额外的统计信息
        </li>
        <li>
          <strong>
            布局灵活
          </strong>
          : 可以包含多个 Statistic 组件
        </li>
        <li>
          <strong>
            视觉层次
          </strong>
          : 与主要统计信息形成层次对比
        </li>
      </ul>
      <h4>
        Statistic 在 Footer 中的配置：
      </h4>
      <ul>
        <li>
          <strong>
            value
          </strong>
          : 统计数值
        </li>
        <li>
          <strong>
            title
          </strong>
          : 统计项标题
        </li>
        <li>
          <strong>
            suffix
          </strong>
          : 数值后缀，如单位
        </li>
        <li>
          <strong>
            layout
          </strong>
          : 布局方式，'horizontal' 表示水平布局
        </li>
      </ul>
      <h4>
        主要统计信息配置：
      </h4>
      <ul>
        <li>
          <strong>
            value
          </strong>
          : 主要统计数值
        </li>
        <li>
          <strong>
            suffix
          </strong>
          : 数值后缀
        </li>
        <li>
          <strong>
            description
          </strong>
          : 统计描述，可以是 Statistic 组件
        </li>
      </ul>
      <h4>
        布局效果：
      </h4>
      <ul>
        <li>
          <strong>
            主要信息
          </strong>
          : 在卡片中央突出显示主要统计信息
        </li>
        <li>
          <strong>
            图表展示
          </strong>
          : 在主要信息下方显示图表
        </li>
        <li>
          <strong>
            底部信息
          </strong>
          : 在卡片底部显示次要统计信息
        </li>
      </ul>
      <h4>
        使用场景：
      </h4>
      <ul>
        <li>
          <strong>
            评分展示
          </strong>
          : 展示评分和相关的详细数据
        </li>
        <li>
          <strong>
            数据对比
          </strong>
          : 在底部展示对比数据
        </li>
        <li>
          <strong>
            详细信息
          </strong>
          : 在底部展示补充信息
        </li>
        <li>
          <strong>
            多维度展示
          </strong>
          : 展示多个维度的统计数据
        </li>
      </ul>
      <h4>
        最佳实践：
      </h4>
      <ul>
        <li>
          <strong>
            信息层次
          </strong>
          : 确保主要信息和次要信息的层次清晰
        </li>
        <li>
          <strong>
            数据关联
          </strong>
          : footer 中的数据应该与主要信息相关
        </li>
        <li>
          <strong>
            视觉平衡
          </strong>
          : 合理分配各部分的视觉空间
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>